<template>
  <div class="resourceLibraryIndex" id="resourceLibraryIndex">
    <baseTabs class="resource-tab" @changeTabs="changeTopTabs" :activeKey="resourceType" :tabsList="tabsList"></baseTabs>
    <div class="resourceLibraryBox">
      <myResources v-if="resourceType == 1"></myResources>
      <sharingResource v-if="resourceType == 2"></sharingResource>
    </div>
  </div>
</template>

<script lang="ts" setup>
import baseTabs from "@/components/tabs/baseTabs.vue";
import myResources from "./myResources.vue";
import sharingResource from "./sharingResource.vue";
import { ref, computed, watch, reactive, onMounted, nextTick, createVNode } from "vue";

const tabsList = [
  {
    tabName: "我的资源",
    key: 1,
  },
  {
    tabName: "共享资源",
    key: 2,
  },
];
const resourceType = ref(1);
//改变头部tab切换
const changeTopTabs = (activeKey: number) => {
  resourceType.value = activeKey;
};
</script>

<style lang="less" scoped>
.resourceLibraryIndex {
  height: calc(100% - 72px);
  background: #fff;

  .resource-tab {
    padding-top: 12px;
    padding-left: 24px;
  }

  .resourceLibraryBox {
    height: 100%;
    background-color: #f6f7f9;
  }
}
</style>
